連假第二天，在這邊先祝大家連假快樂啦，那延續昨天，我們現在已經把String的List拿到了，現在要做的就很簡單，就是我們透過Recyclerview把它顯示出來就可! 那麼我們就來啦

1.修改xml

既然提到recyclerview，我們首先就要把在fragment_add_invitation.xml的image改成recyclerview啦!

<androidx.recyclerview.widget.RecyclerView
                        android:id="@+id/rv_add_invitation_image"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"/>

再過來我們要新增itemView

<?xml version="1.0" encoding="utf-8"?>

<layout
    xmlns:android="http://schemas.android.com/apk/res/android">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/banner_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />



</RelativeLayout>

</layout>

2.新增Adapter

這邊的Adapter就跟之前的做法一樣啦，只是我們要把裡面的資料改成String，因為我們會直接把List傳進去，然後直接在onBindViewHolder透過Glide把圖片顯示出來就好啦!

package com.example.petsmatchingapp.ui.adapter

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter
import androidx.recyclerview.widget.RecyclerView
import com.example.petsmatchingapp.databinding.BannerItemLayoutBinding
import com.example.petsmatchingapp.utils.Constant
import kotlinx.android.synthetic.main.banner_item_layout.view.*
import timber.log.Timber

class MultiplePhotoAdapter(): ListAdapter<String, MultiplePhotoAdapter.MyViewHolder>(DiffCallback) {


    companion object DiffCallback : DiffUtil.ItemCallback<String>() {
        override fun areItemsTheSame(oldItem: String, newItem: String): Boolean {
            return oldItem === newItem

        }

        override fun areContentsTheSame(oldItem: String, newItem: String): Boolean {
            return oldItem == oldItem
        }
    }


    class MyViewHolder(val binding: BannerItemLayoutBinding) :
        RecyclerView.ViewHolder(binding.root) {
        fun bind(item: String) {
            binding.executePendingBindings()

        }


    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        return MyViewHolder(BannerItemLayoutBinding.inflate(LayoutInflater.from(parent.context)))


    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val model = getItem(position)
        Timber.d("測試inside adapter: $model")
        Constant.loadPetImage(model,holder.itemView.banner_image)
        holder.bind(model)

    }
}

3.初始化Adapter

我們一樣要先初始化我們的adapter

private lateinit var multipleAdapter: MultiplePhotoAdapter

private fun setAdapter(){
        val banner = binding.rvAddInvitationImage
        multipleAdapter = MultiplePhotoAdapter()
        banner.adapter = multipleAdapter
        val linearLayout = LinearLayoutManager(requireContext())
        linearLayout.orientation = LinearLayoutManager.HORIZONTAL
        banner.layoutManager =  linearLayout

    }

然後我們再我們昨天拿到List的地方，我們透過submit，把list傳進去

fun saveImageSuccessful(uriList: List<Uri>){
showSnackBar(resources.getString(R.string.update_pet_image_successful),false)


val list =mutableListOf<String>()
for(i in uriList){
list.add(i.toString())
    }


multipleAdapter.submitList(list)
}

太棒啦，這樣我們就完成啦，那就期待明天啦!